<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@page import="cn.edu.zjut.chopper.registry.moniter.BasicMonitorInfo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
	<head> 
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>Registry State</title> 
		
		
		<!-- 1. Add these JavaScript inclusions in the head of your page --> 
		<script type="text/javascript" src="/chopper/js/jquery-1.5.2.js"></script> 
		<script type="text/javascript" src="/chopper/js/Higncharts-2.1.4/highcharts.js"></script> 
		
		<!-- 1a) Optional: add a theme file --> 
		<script type="text/javascript" src="/chopper/js/Higncharts-2.1.4/themes/memory.js"></script>

		
		<!-- 1b) Optional: the exporting module --> 
		<script type="text/javascript" src="/chopper/js/Higncharts-2.1.4//modules/exporting.js"></script> 
		
		
		<!-- 2. Add the JavaScript to initialize the chart on document ready --> 
		<script type="text/javascript"> 
		
			var physicalMemoryMonitorChart;
			var cpuRatioMonitorChart;
			var jvmMemoryMonitorChart;
			var threadChart;
			$(document).ready(function() {
				physicalMemoryMonitorChart = new Highcharts.Chart({
					chart: {
						renderTo: 'physical_memory', 
						defaultSeriesType: 'area'
						
					},
					title: {
						text: 'Physic Memory'
					},
					subtitle: {
						text: ''
					},
					xAxis: {
						labels: {
							formatter: function() {
								var date = new Date(this.value);
								return date.getHours()+':'+date.getMinutes()+':'+date.getSeconds(); 
							}
						}							
					},
					yAxis: {
						title: {
							text: 'Used Memory'
						},
						labels: {
							formatter: function() {
								return this.value +'MB';
							}
						},
						max:2000,
						min:0
					},
					tooltip: {
						formatter: function() {
							return Highcharts.numberFormat(this.y, 0);
						}
					},
					plotOptions: {
						area: {
							marker: {
								enabled: false,
								symbol: 'circle',
								radius: 2,
								states: {
									hover: {
										enabled: true
									}
								}
							}
						}
					},
					series: [{
						name: 'Used Memory',
						data: []
					}]
				});
				
				cpuRatioMonitorChart = new Highcharts.Chart({
					chart: {
						renderTo: 'cpu_ratio',
						defaultSeriesType: 'line'
					},
					title: {
						text: 'CPU Ratio'
					},
					subtitle: {
						text: ''
					},
					xAxis: {
						labels: {
							formatter: function() {
								var date = new Date(this.value);
								return date.getHours()+':'+date.getMinutes()+':'+date.getSeconds(); 
							}
						},
					},
					yAxis: {
						title: {
							text: 'CPU Ratio'
						},
						labels: {
							formatter: function() {
								return this.value+'%';
							}
						},
						max:100,
						min:0
					},
					tooltip: {
						enabled: false,
						formatter: function() {
							return this.y +'%';
						}
					},
					plotOptions: {
						line: {
							dataLabels: {
								enabled: true
							},
							enableMouseTracking: false
						}
					},
					series: [{
						name: 'CPU Ratio',
						data: []
					}]
				});

				jvmMemoryMonitorChart = new Highcharts.Chart({
					chart: {
					renderTo: 'jvm_memory', 
					defaultSeriesType: 'area'
					
				},
				title: {
					text: 'JVM Memory'
				},
				subtitle: {
					text: ''
				},
				xAxis: {
					labels: {
						formatter: function() {
							var date = new Date(this.value);
							return date.getHours()+':'+date.getMinutes()+':'+date.getSeconds(); 
						}
					}							
				},
				yAxis: {
					title: {
						text: 'Used Memory'
					},
					labels: {
						formatter: function() {
							return this.value +'MB';
						}
					},
					max:100,
					min:0
				},
				tooltip: {
					formatter: function() {
						return Highcharts.numberFormat(this.y, 0);
					}
				},
				plotOptions: {
					area: {
						marker: {
							enabled: false,
							symbol: 'circle',
							radius: 2,
							states: {
								hover: {
									enabled: true
								}
							}
						}
					}
				},
				series: [{
					name: 'Used Memory',
					data: []
				}]
			});

			threadChart = new Highcharts.Chart({
				chart: {
				renderTo: 'thread_count',
				defaultSeriesType: 'line'
			},
			title: {
				text: 'Thread Count'
			},
			subtitle: {
				text: ''
			},
			xAxis: {
				labels: {
					formatter: function() {
						var date = new Date(this.value);
						return date.getHours()+':'+date.getMinutes()+':'+date.getSeconds(); 
					}
				},
			},
			yAxis: {
				title: {
					text: 'Thread Count'
				},
				labels: {
					formatter: function() {
						return this.value;
					}
				},
				min:0
			},
			tooltip: {
				enabled: false,
				formatter: function() {
					return this.y;
				}
			},
			plotOptions: {
				line: {
					dataLabels: {
						enabled: true
					},
					enableMouseTracking: false
				}
			},
			series: [{
				name: 'Thread',
				data: []
			}]
		});

			});
			
		</script> 
		
	</head> 
	<body style="background-color: #AFEEEE; text-align: center;">
		
		<%BasicMonitorInfo basicMonitorInfo = (BasicMonitorInfo)request.getAttribute("basicMonitorInfo");%>
		<jsp:include page="head.html"/>
		<center>
		<table width="1000" style="text-align: center;">
			<tr><td style="font-size:20pt;" colspan="4">Registry Monitor</td></tr>
			<tr><td width="20%" style="background-color:#969696;">Computer Name:</td><td width="30%" style="background-color:#90EE90;"><%out.println(basicMonitorInfo.getComputerName()); %></td><td width="20%" style="background-color:#969696;">IP Address:</td><td width="30%" style="background-color:#90EE90;"><%out.println(basicMonitorInfo.getIpAddress()); %></td></tr>
			<tr><td width="20%" style="background-color:#969696;">OS Name:</td><td width="30%" style="background-color:#90EE90;"><%out.println(basicMonitorInfo.getOsName()); %></td><td width="20%" style="background-color:#969696;">OS Version:</td><td width="30%" style="background-color:#90EE90;"><%out.println(basicMonitorInfo.getOsVersion()); %></td></tr>
			<tr><td width="20%" style="background-color:#969696;">JAVA Supplier:</td><td width="30%" style="background-color:#90EE90;"><%out.println(basicMonitorInfo.getJavaSupplier()); %></td><td width="20%" style="background-color:#969696;">JAVA Vertion:</td><td width="30%" style="background-color:#90EE90;"><%out.println(basicMonitorInfo.getJavaVertion()); %></td></tr>
		</table>
		</center>		
		<div id="physical_memory" style="width: 500px; height: 300px;float:left; margin-left: 122px;"></div> 
		<div id="cpu_ratio" style="width: 500px; height: 300px;float:right;margin-right: 122px;"></div> 
		<div id="jvm_memory" style="width: 500px; height: 300px;float:left;margin-left: 122px;"></div>
		<div id="thread_count" style="width: 500px; height: 300px;float:right;margin-right: 122px;"></div> 
		<script type="text/javascript"> 
			function updateData(){
				$.ajax({  
                    url:'/chopper/RegistryMonitor',  
                    dataType:'json', 
                    error:function(){  
                        alert("error occured in getting data from server!");  
                    },  
                    success:function(data){  
						var physicalMemoryMonitorData = new Array();
						var cpuMonitorData = new Array();
						var jvmMemoryMonitorData = new Array();
						var threadMonitorData = new Array();
                        $.each(data,function(index){  
							var tempPhysicalMemoryPair = new Array();
							var tempCPUPair = new Array();
							var tempJVMMemoryPair = new Array();
							var tempThreadCountPair = new Array();
                            $.each(data[index],function(key,value){  
								if(key == 'usedMemory'){
									tempPhysicalMemoryPair[1] = value;
								}else if(key == 'time'){
									tempPhysicalMemoryPair[0] = value.time;
									tempCPUPair[0] = value.time;
									tempJVMMemoryPair[0] = value.time;
									tempThreadCountPair[0] = value.time;
								}else if(key == 'cpuRatio'){
									tempCPUPair[1] = value;
								}else if(key == 'jvmUsedMemory'){
									tempJVMMemoryPair[1] = value;
								}else if(key == 'totalThread'){
									tempThreadCountPair[1] = value;
								}
                            });  
							physicalMemoryMonitorData[index] = tempPhysicalMemoryPair;
							cpuMonitorData[index] = tempCPUPair;
							jvmMemoryMonitorData[index] = tempJVMMemoryPair;
							threadMonitorData[index] = tempThreadCountPair;
                        }); 
						physicalMemoryMonitorChart.series[0].setData(physicalMemoryMonitorData);
						cpuRatioMonitorChart.series[0].setData(cpuMonitorData);
						jvmMemoryMonitorChart.series[0].setData(jvmMemoryMonitorData);
						threadChart.series[0].setData(threadMonitorData);
                    }  
                }); 			
			};
			updateData();
			setInterval(function(){
				updateData();
			}, 5000);
			
		</script>
	<jsp:include page="foot.html"/>		
	</body> 
</html> 